<script lang="ts" setup>
import { ref,h } from 'vue';
import { useVbenDrawer } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import { detailApi, editApi } from '#/api/system/setting';

const key = ref('');

const [Form, formApi] = useVbenForm({
  schema: [
    {
        fieldName: 'default',
        label: '短信平台',
        component: 'RadioGroup',
        labelWidth: 130,
        defaultValue: 'aliyun',
        componentProps: {
            options: [
                { label: '阿里云', value: 'aliyun' },
                { label: '腾讯云', value: 'qcloud' },
                { label: '七牛云', value: 'qiniu' },
            ],
        },
        rules: 'required',
    },
    {
        fieldName: 'engine.aliyun.AccessKeyId',
        label: 'AccessKeyId',
        component: 'Input',
        labelWidth: 130,
        dependencies: {
            show(values) {
                return values.default === 'aliyun';
            },
            triggerFields: ['default'],
        },
    },
    {
        fieldName: 'engine.aliyun.AccessKeySecret',
        label: 'AccessKeySecret',
        labelWidth: 130,
        component: 'Input',
        dependencies: {
            show(values) {
                return values.default === 'aliyun';
            },
            triggerFields: ['default'],
        },
    },
    {
        fieldName: 'engine.aliyun.sign',
        label: '短信签名',
        component: 'Input',
        labelWidth: 130,
        dependencies: {
            show(values) {
                return values.default === 'aliyun';
            },
            triggerFields: ['default'],
        },
    },
    {
        fieldName: 'engine.aliyun.name',
        label: '平台名',
        component: 'Input',
        defaultValue: '阿里云短信',
        dependencies: {
            show: false,
            triggerFields: [''],
        },
    },
    {
        fieldName: 'engine.aliyun.website',
        label: '地址',
        component: 'Input',
        defaultValue: 'https://dysms.console.aliyun.com/dysms.htm',
        dependencies: {
            show: false,
            triggerFields: [''],
        },
    },
    {
        fieldName: 'engine.qcloud.SdkAppID',
        label: 'SdkAppID',
        component: 'Input',
        labelWidth: 130,
        dependencies: {
            show(values) {
                return values.default === 'qcloud';
            },
            triggerFields: ['default'],
        },
    },
    {
        fieldName: 'engine.qcloud.AccessKeyId',
        label: 'AccessKeyId',
        component: 'Input',
        labelWidth: 130,
        dependencies: {
            show(values) {
                return values.default === 'qcloud';
            },
            triggerFields: ['default'],
        },
    },
    {
        fieldName: 'engine.qcloud.AccessKeySecret',
        label: 'AccessKeySecret',
        component: 'Input',
        labelWidth: 130,
        dependencies: {
            show(values) {
                return values.default === 'qcloud';
            },
            triggerFields: ['default'],
        },
    },
    {
        fieldName: 'engine.qcloud.sign',
        label: '短信签名',
        component: 'Input',
        labelWidth: 130,
        dependencies: {
            show(values) {
                return values.default === 'qcloud';
            },
            triggerFields: ['default'],
        },
    },
    {
        fieldName: 'engine.qcloud.name',
        label: '平台名',
        component: 'Input',
        defaultValue: '腾讯云短信',
        dependencies: {
            show: false,
            triggerFields: [''],
        },
    },
    {
        fieldName: 'engine.qcloud.website',
        label: '地址',
        component: 'Input',
        defaultValue: 'https://console.cloud.tencent.com/smsv2',
        dependencies: {
            show: false,
            triggerFields: [''],
        },
    },
    {
        fieldName: 'engine.qiniu.AccessKey',
        label: 'AccessKey',
        component: 'Input',
        labelWidth: 130,
        dependencies: {
            show(values) {
                return values.default === 'qiniu';
            },
            triggerFields: ['default'],
        },
    },
    {
        fieldName: 'engine.qiniu.SecretKey',
        label: 'SecretKey',
        component: 'Input',
        labelWidth: 130,
        dependencies: {
            show(values) {
                return values.default === 'qiniu';
            },
            triggerFields: ['default'],
        },
    },
    {
        fieldName: 'engine.qiniu.sign',
        label: '短信签名',
        component: 'Input',
        labelWidth: 130,
        dependencies: {
            show(values) {
                return values.default === 'qiniu';
            },
            triggerFields: ['default'],
        },
    },
    {
        fieldName: 'engine.qiniu.name',
        label: '平台名',
        component: 'Input',
        defaultValue: '七牛云短信',
        dependencies: {
            show: false,
            triggerFields: [''],
        },
    },
    {
        fieldName: 'engine.qiniu.website',
        label: '地址',
        component: 'Input',
        defaultValue: 'https://portal.qiniu.com/sms/dashboard',
        dependencies: {
            show: false,
            triggerFields: [''],
        },
    },
    {
      component: 'Divider',
      fieldName: '',
      hideLabel: true,
      renderComponentContent: () => {
        return {
          default: () => h('div', '短信验证码'),
        };
      },
    },
    {
        fieldName: 'scene.captcha.name',
        label: '场景名',
        component: 'Input',
        defaultValue: '短信验证码 (通知用户)',
        dependencies: {
            show: false,
            triggerFields: [''],
        },
    },
    {
        fieldName: 'scene.captcha.isEnable',
        label: '是否开启',
        component: 'RadioGroup',
        labelWidth: 130,
        defaultValue: false,
        componentProps: {
            options: [
                { label: '开启', value: true },
                { label: '关闭', value: false },
            ]
        },
        rules: 'required',
    },
    {
        fieldName: 'scene.captcha.templateCode',
        label: '模板ID',
        component: 'Input',
        labelWidth: 130,
    },
    {
        fieldName: 'scene.captcha.content.aliyun',
        label: '模板内容',
        component: 'Input',
        labelWidth: 130,
        defaultValue: '验证码${code}，您正在进行身份验证，若非本人操作，请勿泄露。',
        dependencies: {
            show(values) {
                return values.default === 'aliyun';
            },
            triggerFields: ['default'],
        },
    },
    {
        fieldName: 'scene.captcha.content.qcloud',
        label: '模板内容',
        component: 'Input',
        labelWidth: 130,
        defaultValue: '验证码${code}，您正在进行身份验证，若非本人操作，请勿泄露。',
        dependencies: {
            show(values) {
                return values.default === 'qcloud';
            },
            triggerFields: ['default'],
        },
    },
    {
        fieldName: 'scene.captcha.content.qiniu',
        label: '模板内容',
        component: 'Input',
        labelWidth: 130,
        defaultValue: '验证码{1}，您正在进行身份验证，若非本人操作，请勿泄露。',
        dependencies: {
            show(values) {
                return values.default === 'qiniu';
            },
            triggerFields: ['default'],
        },
    },
  ],
  showDefaultActions: false,
});

const [Drawer, drawerApi] = useVbenDrawer({
  async onConfirm() {
    const { valid } = await formApi.validate();
    if (!valid) return;
    const values = await formApi.getValues();
    drawerApi.lock();
    editApi(key.value, values)
      .then((res) => {
        message.success({
          content: res.message,
        });
        drawerApi.close();
      })
      .catch(() => {
        drawerApi.unlock();
      });
  },
  onOpenChange(isOpen) {
    if (isOpen) {
      const data = drawerApi.getData();
      formApi.resetForm();
      if (data.key) {
        key.value = data.key;
        drawerApi.setState({ title: data.describe })
        detailApi(data.key).then((res) => {
          formApi.setValues(res.values);
        })
      }
    }
  },
  overlayBlur: 1,
  title: '',
//   class: 'w-[380px]',
});
</script>
<template>
  <Drawer>
    <Form />
  </Drawer>
</template>
